import React, { useState } from 'react';
import { Layout, Menu, ConfigProvider } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';
import styled from 'styled-components';

const { Sider } = Layout;
const { SubMenu } = Menu;

const StyledSider = styled(Sider)`
  background: transparent !important;
  .ant-layout-sider-children {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
  }
  .ant-menu {
    background: transparent;
  }
  .ant-menu-item-selected {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }
`;

const ToggleButton = styled.div`
  position: absolute;
  top: 16px;
  right: -32px;
  width: 32px;
  height: 32px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
`;

const Sidebar = () => {
    const [collapsed, setCollapsed] = useState(false);

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    return (
        <div className='ml-4 mb-4 rounded-[20px] p-4 bg-[rgba(255,255,255,.1)]' style={{ borderRight: 0 }}>
            <ConfigProvider
                theme={{
                    components: {
                        Menu: {
                            itemBg: 'transparent',
                            itemColor: 'white',
                            itemSelectedColor: '#69C5BB',
                            darkSubMenuItemBg: 'transparent',
                            itemHoverColor: '#69C5BB',
                            itemBorderRadius: 20,
                            itemPaddingInline: 4,
                            itemMarginInline: 0,
                            // itemSelectedBg: 'rgba(255, 255, 255)',
                        },
                    },
                }}>
                <Menu
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    className="text-[16px]"
                    style={{ height: '100%', borderRight: 0 }}
                >
                    <SubMenu key="sub1" icon={<UserOutlined />} className="font-bold" title="Top Tools">
                        <Menu.Item key="1">IT Tools</Menu.Item>
                        {/* <Menu.Item key="2">option2</Menu.Item>
                        <Menu.Item key="3">option3</Menu.Item>
                        <Menu.Item key="4">option4</Menu.Item> */}
                    </SubMenu>
                    {/* <SubMenu key="sub2" icon={<VideoCameraOutlined />} title="Video">
                        <Menu.Item key="5">option5</Menu.Item>
                        <Menu.Item key="6">option6</Menu.Item>
                        <SubMenu key="sub3" title="Submenu">
                            <Menu.Item key="7">option7</Menu.Item>
                            <Menu.Item key="8">option8</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <Menu.Item key="9" icon={<UploadOutlined />}>
                        Files
                    </Menu.Item> */}
                </Menu>
            </ConfigProvider>
            {/* <ToggleButton onClick={toggleCollapsed}>
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </ToggleButton> */}
        </div>
    );
};

export default Sidebar;
